<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="dns-prefetch" href="http://jxpxxzj.oschina.io">
  <title>雄心万丈, 躺在床上</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="雄心万丈, 躺在床上">
<meta property="og:url" content="http://jxpxxzj.oschina.io/index.html">
<meta property="og:site_name" content="雄心万丈, 躺在床上">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="雄心万丈, 躺在床上">
  
    <link rel="alternative" href="/atom.xml" title="雄心万丈, 躺在床上" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  
  
</head></html>
<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="https://en.gravatar.com/userimage/114716744/58f3842dbf28498a4087b85f00b33de4.jpg?size=300" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">jxpxxzj</a></h1>
		</hgroup>

		
		<p class="header-subtitle">我们最怕看到的未来是, 我们不守规矩, 以为这是聪明, 是特权, 是优越感。</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/categories/随笔/">随笔</a></li>
	        
				<li><a href="/categories/技术/">技术</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
            
    			
            
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/jxpxxzj" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/jxpxxzj" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
					<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/zijin-xiao" title="zhihu"><i class="icon-zhihu"></i></a>
		        
					<a class="mail" target="_blank" href="mailto:ZijinX@outlook.com" title="mail"><i class="icon-mail"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>
    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">jxpxxzj</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="https://en.gravatar.com/userimage/114716744/58f3842dbf28498a4087b85f00b33de4.jpg?size=300" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">jxpxxzj</h1>
			</hgroup>
			
			<p class="header-subtitle">我们最怕看到的未来是, 我们不守规矩, 以为这是聪明, 是特权, 是优越感。</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/categories/随笔/">随笔</a></li>
		        
					<li><a href="/categories/技术/">技术</a></li>
		        
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/jxpxxzj" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/jxpxxzj" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
						<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/zijin-xiao" title="zhihu"><i class="icon-zhihu"></i></a>
			        
						<a class="mail" target="_blank" href="mailto:ZijinX@outlook.com" title="mail"><i class="icon-mail"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionheight="100" data-contentid="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="post-after-first-check" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2017/02/26/after-first-check/">瞎扯集 \#1</a>
    </h1>
        <a href="/2017/02/26/after-first-check/" class="archive-article-date">
  	<time datetime="2017-02-25T16:24:03.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-02-26</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>踩点交完了应用程序设计竞赛第一轮审查的两个文档, 然后就想随便写点东西.<br>想想好久没写过思想汇报了, 还是决定记下来, 过段时间全忘了怪可惜的.<br>可能有点长, 读后感性质, 下文引用一点各路语录. </p>
<h3 id="关于萌天"><a href="#关于萌天" class="headerlink" title="关于萌天"></a>关于萌天</h3><p>(男神), 我觉得他大概就是我未来几年计划方向的一个非常成功的样板, 想的事情上也有一些相似点, 主要还是从他之前写的东西了解我现在的情况吧.</p>
<h2 id="人与事"><a href="#人与事" class="headerlink" title="人与事"></a>人与事</h2><blockquote>
<p>JustZht:<br>学校是一个短时间内看不到成果的地方 只有理论 —— 而我恰好是那种信奉 quick hack 的人 什么事情都是不看理论先实践一番 有需要的知识再查找 我并没有觉得我这种方式有什么错   </p>
</blockquote>
<p>学习策略其实是一个很说不清的东西, 包括我自己也没办法解释我现在到底在以一个怎样的状态去学习和摸索.<br>在我刚开始 programming 的时候, 我是不太懂这种策略的, 也就是可以说学的没那么功利, 从基础开始一点一点爬. 事实证明在早期这样的策略是非常正确的, 从语言语法到数据结构与算法, 这些最基础的内容为我以后的学习打下了非常好的基础.<br>之前我和别人说过, 编程语言的学习很重要的是知识迁移与触类旁通, 所以在早期学习的时候, 好好学一门语言是非常重要的.<br>最早接触的语言是 QBasic, 大概是小学三四年级, 那时候就是一本书起步, 最痛苦的事情是以当时的水平其实很多东西是没法看懂的, 最会玩的就是用 <code>PRINT</code> 拼出若干图案.<br>后来认真学的是 Pascal, 主要目的是 OI 了, 在有合适的指导然后练习等等的协助下, 学习起来倒也不算很累, 而且就做算法题的水平也学不到很多高级的东西(比如说 <code>class</code> 还是 <code>unit</code>? 忘了, 好久没写过了), 但是文法和语法上的系统培训, 为以后学习 C++, VB, php 等都做了非常好的基础(直到遇见 Haskell).</p>
<p>也不知道什么时候起, 策略就变成了引文里的那种了, 先不管理论硬上, 遇到问题了再倒回来学习, 确实很神奇很有用.<br>如果要我推荐如何学习, 后面一种一定是首选.<br>不过也有可能和个人有关系? 也许有的人就喜欢一步一步来? </p>
<p>zhihu 上之前还看到个东西, 关于数学的, 大概是说为什么数学学起来那么难受, 就是因为学习路线和发现路线是反的. 发现是从实际问题出发, 先尝试解决一下, 再把内涵归纳成理论. 学习的时候是反着来的, 先学习理论再用理论去解决实际问题.<br>也许这种事情之间都是有关系的?</p>
<p>如果说以后要去做什么内部培训的话, 策略应该就是从问题出发了.</p>
<blockquote>
<p>JustZht:<br>很多人说你现在学的知识都是给后面做储备 但是我不明白这是什么逻辑 —— 这是说毕业就不能学了么 自学的能力在哪里？现在学的知识要留到以后用 那么为什么必须现在去学习？ </p>
</blockquote>
<p>其实我个人觉得这两个事应该要分开理解一下. 从我个人角度出发, 学习是之后做储备, 这种情况有时候是对的. 比如说计算机科学的一些基础(计算机组成原理 / 操作系统原理 / 编译原理 / 计算机网络 / 算法与数据结构)等等, 确实是给后面做储备的, 因为写的东西不达到一定程度和数量, 会感觉这些知识根本用不上.<br>也就是可以这么理解, 还没有到用到这些东西的时候.  </p>
<p>可以举一个简单的例子, 比如说造一个 React 的轮子, 有几个核心的东西, 比如 Virtual DOM 和 jsx 的 js 混入 html, 前者需要用到树的相关知识, 比如说计算两棵树的完全 diff, 时间复杂度应该是 O(n^3), 有一些方法可以做优化. jsx 的转换则需要用到编译原理的知识, 编写一个 html to js 的转译器, 还会涉及到状态机等的一些形式语言的内容.<br>再说 .NET CLR 的垃圾回收器, 回收算法是基于图的遍历等等的理论.</p>
<p>自学是要有基础的, 也就是上面那些储备知识, 只是最开始自学的时候, 会感觉那些东西其实用不到, 然后可能就产生了一些错觉说那些铺垫都是没用的.</p>
<p>或者也可能不能这么理解, 上面那句话的意思是说要终身学习, 说的是没错, 但是什么时候学什么东西应该还是比较重要的.</p>
<blockquote>
<p>JustZht:<br>更为重要的是 学校本身是一个眼界有限的地方 —— 这并不是说学校的资源有限 而是说 真正能接触到学校资源的人总是少数 学校里各类名额总是仅有的那么几个 导致很多时候学校里大部分人并不能得到足够的机会去一览更高的境界 因此总体上 学校学生的眼界是极其落后而有限的 呆在这种环境 不如出去多见识</p>
</blockquote>
<p>学校的资源确实很有限, 但是有几个时刻是让我很感动的, 比如说去 IEEE 下文献, 上面写着 Central South University 已经有这篇的授权, 或者是用 @csu.edu.cn 的邮箱申请到的各种 edu 资源,  还有来学校第一次进图书馆给我的那种震惊, 是难以言表的.</p>
<p>至于奖学金这种资源, 从小到大我都觉得我不是那种人, 所以根本就没想过了.</p>
<p>出去一览的重要是去接触更多的东西, 我觉得这个和学院有很大的关系.<br>学院怎么说呢, 就提一点, 都什么年代了还一天到晚文档规范文档规范, 这事先不展开, 下文来.</p>
<blockquote>
<p>JustZht:<br>然后就是 大二暑假的实习 如果没有大变化的话 就已经确定了<br>其实我内心还盘算着能不能整个大三都呆在北京 需要考试再回学校 对于我来说 我已经知道自己目前喜欢做什么 擅长做什么 而学校对于我来说并没有太多用处 —— 我的技能不是上课习得的 我的兴趣爱好也不是学校引导建立的<br>参加hackathon 在公司工作 做些三维和游戏 或者写开源的东西 都是远比学校有趣的事情</p>
</blockquote>
<p>前半段是个人问题, 关于实习, 现在遇到的主要问题是好像没几个大厂收大一去实习的…期望什么时候可以解决吧, 内推之类的.<br>后半段我是赞同的, 绝大多数 coding 技能并不是上课习得的, 兴趣爱好也没有什么依赖, 都是靠自我培养慢慢形成的. Hackathon 和 Open-Source 确实很吸引我, 我也觉得在这些上面投入时间是很值得的.<br>那学校的意义是什么? 我现在其实没想清楚, 目前我觉得最大的意义是学校的教育资源(见上文), 高质量的人脉(大厂内推), CS 的理论课程, 以及 985 / 211 的毕业证.<br>最后一个可能很重要可能不太重要, 先放到最前面讲. 教育资源已经提过, 图书馆和文献资料有时候真的非常有用, 虽然有些书有点老, 但是还是可以发现一些新鲜血液的.<br>人脉其实还没体会到多少, 尤其是牵扯到社会的那些, 主要是校内的人脉资源. (打个广告: 求一通信死党, 会架卫星锅会破解信号)<br>CS 的理论课程上文也提到过了, 有其重要性, 只是需要很长一段时间体会, 学校的课程就是一个很好的机会, 虽然听课这个过程可能有点无聊, 但是上课的老师在这方面还是可以侃侃而谈的, 和他们多聊聊, 会有不少收获.</p>
<blockquote>
<p>JustZht:<br>这一年下来 我发现我其实是一个很不安分的人 相对于呆在学校上课 我更喜欢做有趣的事情 然后就会有很多冲突 </p>
</blockquote>
<p>其实我也想, 主要就是不敢. 来自多方面的压力吧, 主要是学院上的行政压力, 以及一些班级上的问题, 所谓不能带了个坏头, 说什么班长带头翘课搞事, 传出去多不好.<br>所以我现在还是一个比较安分的人吧, 虽然水课也坚持全勤(当然不一定听, 最少是到场了的), 开会按时到认真做记录, 有每周每周的 timetable, 学习上虽然有点混但是不至于挂科等等, 排名什么都还凑合, 奖学金拿不到但也不至于被喷.<br>我不确定这样能为以后创造多大的价值, 怎么说还是有一点点功利的, 但是至少在之前造成了很大麻烦的那段时间已经过去了, 我也可以先接受这个现实.  </p>
<blockquote>
<p>JustZht:<br>父母之前一直希望我能在学校好好读书 但令他们沮丧的是 我在大学就没怎么认真读过书 大一参加了学长的创业公司 大二频繁出去参加hackathon 学校的事情我能逃就逃 然后我就挂了几门科 我其实也觉得挂科无所谓了 既然我有真正喜欢的事情去做 学校的事情算什么呢 </p>
<p>JustZht:<br>然后 让我觉得比较宽慰的是 我的父母也很开明地适应了我的变化 只要求我能拿到中南的毕业证就行<br>父母总是说用人单位还是要看毕业证的 这话其实在他们的语境下是成立的：中小城市的企事业单位肯定是要大学毕业证的 不过我并不打算去这类地方发展 真正适合我的地方也许并不需要毕业证 而是拿出 github 和 dribbble 页面就能进公司 </p>
</blockquote>
<p>父母总是很难理解的, 不论是这个时代, 还是 IT 这个行业, 也许接受不了传统的这种概念, 需要一些时间吧. 不过如果很多人都有这个问题, 说不定也会有更合适的解决方案.<br>很庆幸的现在的互联网企业, 在这方面做的还是不差的, 没有那么看重毕业证与成绩, 更关注那些肚子里的墨水与干货, 传统软件行业其实是不吃这一套的. 所谓想去的地方, 就是那种开放与自由的新时代吧.<br>不知道若干年后, 当角色换位, 我会不会如此看待几十年后的又一个新兴产业.</p>
<blockquote>
<p>JustZht:<br>其实这还涉及到一个问题 就是你是否能够牛逼到让公司直接要你的地步 而现实中的一个共识是 大多数人都肯定是平庸的 在不能确定自己是不是那种天才的时候 我想大部分人肯定选择最稳妥的方案<br>但是很有可能事实是这样的 天才并不一定天资聪颖 而是天才选择了不保守的道路 所以才成为了他人口中的天才 毕竟 承认自己天资不够 总比承认自己不够勇敢更加容易些<br>话归如此 这个世界还是成王败寇的 选择不保守道路然后挂掉的人其实也大有人在 至于能不能成功 完全靠自己</p>
</blockquote>
<p>感觉是非常有含金量的一句话, 我现在的各种尝试, 总结起来可能就是上面这样的吧.<br>没有什么特别想说的, 也不好怎么说, 见到这段话的感觉无以言表.  </p>
<!--
> 珍大户 @ zhihu:  
众所周知，华为喜欢招农村生源的大学生。海底捞也一样，喜欢招农村人。因为他们最能接受吃苦。  
华为给予高薪，告诉这些孩子们，只要你们奋斗，就能在城市站稳脚跟。海底捞带着员工学习使用ATM机，教他们上网，去KTV，告诉这些孩子，只要你们奋斗，你们也可以像城市人一样生活。

其实说来说去还是资源问题.  
父母其实一直在说, 想让我读完大学就去公务员之类的, 也就是抱着一个不那么容易掉的饭碗, 不过这真的是我想做的吗?  

小时候其实就挺像这样的, 有很多东西是自己想要的, 但是实在是不好意思开口, 要的太多但是有点贵. 不过还好我发现了 programming 是自由的, 不是那么的需要资金但是也能玩的很开心, 一台电脑就能让做自己各种想做的事.  
想买 10 套相同的 Lego 然后用各种重复的零件拼出无穷的花样, 创造与破坏的乐趣是这么多年推动我前行一个很重要的因素. 电脑上无穷的可能性, 满足了我当年那一点点的好奇心.

所以应该奋斗, 让自己往高处爬, 不仅是为了自己, 抓到那一点点可能的财务自由的机会, 也是为了未来积累资本.  
我希望的是, 能让未来做一些符合自己心情的事情的时候, 不用再那么受羁绊; 或者是以后用资本换来更好的教育资源, 从而滚雪球式的将这些优势累积起来.  
讲那么多, 绕来绕去都是 money 驱动的, 虽然不算农村来的, 但是就经济程度而言实在是被甩开太远, 让我自己更能吃苦, 为了能像城市人那样生活, 和未来也像城市人那样生活.

-->
<p><em>以下内容可能还没写完, 有可能以后放到瞎扯集 #2</em></p>
<h2 id="软件学院"><a href="#软件学院" class="headerlink" title="软件学院"></a>软件学院</h2><blockquote>
<p>JustZht:<br>再反方向看下 目前这些神神叨叨的创业大赛 甚至每个班都要求去一个队伍 准入标准够低了 水准自然大家都懂<br>(引用一篇: <a href="http://www.justzht.com/waibaodasai/" target="_blank" rel="external">http://www.justzht.com/waibaodasai/</a>)</p>
</blockquote>
<p>信息院的还是不懂软件院的苦啊.</p>
<h3 id="行政与组织"><a href="#行政与组织" class="headerlink" title="行政与组织"></a>行政与组织</h3><p>不知道是不是学院特色, 或者是中部末流 985 级别院校的通病, 就是爱搞形式主义.<br>形式主义有很多种形式, 比如班级管理, 日常活动等等.  </p>
<h3 id="关于班长"><a href="#关于班长" class="headerlink" title="关于班长"></a>关于班长</h3><p>写这句话的时间是 02:09, 有点晚, 忙了一天也有点困. 我的有关这部分的记忆, 很多是碎片化的, 中途停下来过几次整理和回放, 可能会写的很乱.</p>
<p>班级管理, 其实如果真的按我的那种想法来, 我觉得应该是一个非常松散的组织, 也就是每个人自己发展, 自己去认识几个志同道合的朋友, 那些和自己不在一条道上的, 性格不合的那就扔掉算了, 有多大影响也不是现在可以估算的.<br>我希望这样能有一个好结果, 热爱这个行业的愿意自己去探索, 不热爱这个行业的也会思考如何转行, 所谓各有所长; 有那么几个交心的朋友, 也有几个能坐下来谈正事的朋友, 更有一群能一起出去浪, 有着共同兴趣爱好的死党.  </p>
<p>这是我心目中最理想的的大学生活方式, 学习自由, 生活自由. 很遗憾现实狠狠地扇了我几下, 奇怪的管理制度和层层叠加下的形式主义让我一直在思考, 怎样才能把我的那些想做的事, 包装在一层合理的政治正确下.<br>后来我发现这事几乎是不可能的, 再继续想是浪费时间和精力, 我也就只能想法归想法, 脑子里想一套, 嘴里说一套, 手中做一套. 虽然难受了自己, 但是最少不会遭领导黑, 不至于非常严重的影响班级评优之类的.  </p>
<p>有一天晚上吧, 我和我一高中同学聊天, 然后就讲到了这件事. 她觉得现在多体验一些事情, 有不一样的生活体验, 这样才不会后悔.<br>我当时在纠结了很久之后选择竞选这个 leader 的职位, 也是有这么一个初衷吧, 体验一下, 然后最少能在我人生中刻上一点印记.<br>其实现在还是有一点点后悔当时去做这个决定的, 吃了不少苦头现在还不能随便甩.</p>
<p>最早, 大约是暑假的时候, 我是非常坚定的不想去从事一个行政岗位的, 大概就是与我个人的发展路线不符, 后来阴差阳错, 一点一点的到了现在这个位置上.<br>那我觉得, 既来之则安之, 选择了体验这样的生活, 就应该好好干完, 把我那些想传达出去的价值观, 想帮助他人的热忱, 认真地做好.</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2017/02/26/after-first-check/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
  
    <article id="post-impl-pcm-fe" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2017/02/12/impl-pcm-fe/">Private-Cloud-Music 的前端实现</a>
    </h1>
        <a href="/2017/02/12/impl-pcm-fe/" class="archive-article-date">
  	<time datetime="2017-02-12T14:47:33.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2017-02-12</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>被安利了 <a href="https://github.com/BLumia/Private-Cloud-Music" target="_blank" rel="external">https://github.com/BLumia/Private-Cloud-Music</a>, 虽然我没有这个需求(网易云已经解决了这个问题), 不过由于正在考虑玩玩 React, 所以决定重写一个这个前端用来学习 React 和练手.</p>
<h2 id="为什么选择-React"><a href="#为什么选择-React" class="headerlink" title="为什么选择 React"></a>为什么选择 React</h2><p>在网页设计大赛的文章里提到了为什么选择 Vue 而不是 React, 主要的原因是不喜欢 jsx 的奇葩语法. 这次技术选型则转到了 React, 除了慢慢接受 jsx, 还有几个原因是踩了 Vue 的坑.</p>
<p>先贴个轮子哥语录:<br><img src="/2017/02/12/impl-pcm-fe/1.png" alt="1.png" title=""><br>放到这里的原因是转到 React 完美的符合了 “什么都不管, 先做出来” 的这种理念.  </p>
<h3 id="踩了什么坑"><a href="#踩了什么坑" class="headerlink" title="踩了什么坑"></a>踩了什么坑</h3><h4 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h4><p>踩坑要从技术专家考核作品说起, 在作品中为了实现每个文件一个进度条, 需要给每个 object 都挂一个 <code>progress</code> 的 key, 而 Vue 不允许动态添加根级响应式属性, 所以必须在初始化实例前声明根级响应式属性, 最后的方案是对后端 API 进行改动, 将一个 <code>progress</code> 夹在后端的数据中传给前端处理.<br>这明显是一种很 hack 的设计, 不过为了解决问题, 也只能这样处理. React 的单向数据流在这种问题上还是有一定优势的.</p>
<p>然后就是生命周期了, 有时候想让 Vue 重绘一下, 或者不想让 Vue 重绘, 但是并不知道怎么搞…<br>用前端框架的时候还想着操作 dom, 绝大多数情况是方法不对, 既然我都找不到方法, 那我还是先放一放跳个新坑好了.</p>
<h4 id="Element-UI"><a href="#Element-UI" class="headerlink" title="Element-UI"></a>Element-UI</h4><p>Element-UI 做的还是可以的, 但是在 Layout, 以及设计语言等方面则有明显的不足, 同时小问题也比较多, Ant Design 很好的解决了这两个痛点问题, 虽然不像 Vue 的坑那么影响, 但是也是推动选择 React 的一大因素.</p>
<h2 id="开发经历"><a href="#开发经历" class="headerlink" title="开发经历"></a>开发经历</h2><h3 id="React-Antd-的配置"><a href="#React-Antd-的配置" class="headerlink" title="React + Antd 的配置"></a>React + Antd 的配置</h3><p>Vue 的环境配置其实是非常简单的, 现在的几个 Vue 项目的环境都是手动搭建的, 没有使用脚手架 / CLI 之类的工具辅助完成.</p>
<p>但是换到 React 之后, 手动搭建环境的这件事就很惨烈的失败了, 最后依靠 antd-init 完成了初始化工作, 然后自己加上 ESLint 之类的辅助工具.<br>主要的问题还是 webpack2, babel 等搞起来让我很头大, 因为需要配置 jsx 翻译等, webpack2 的 API 又有些改动, 参考文档偏少, 同时 Antd 还需要依赖一些 plugins 用于选择性加载组件等功能, 全凑一起之后各种小问题大问题, 不过我还是会找个时间研究下如何手动搭建环境的.<br>Antd 还提供了一些别的脚手架, 用起来让我感觉更是困惑, antd-init 还是比较快捷的, 毕竟也不是什么大项目, 用这种简单粗暴的工具应该不是什么问题, 但是之后的应用程序设计竞赛, 估计还是得找个适合大型前端项目用的管理工具了.</p>
<h3 id="编码实践"><a href="#编码实践" class="headerlink" title="编码实践"></a>编码实践</h3><p>开始编写之前, 先是通读了一遍 React 的官方文档, 理清了一些语法上的问题之后, 之后就开始动手编写代码. </p>
<h4 id="理解-React"><a href="#理解-React" class="headerlink" title="理解 React"></a>理解 React</h4><p>这是第一次写 React, React 使用的是 Functional-Programming 的理念, 以前在研究 Haskell 的时候接触过一些, 但是理解的不够深入.<br>官方的 thinking-in-react 那页看完之后估计是全忘了, 尤其是如何抽象组件和完成通信, 写出来的东西是一大坨非常复杂的 elements, 反正看起来是非常丑, 也似乎有点难维护. 虽然可以正常工作. 应该要找时间重读一遍, 然后重构一下的.</p>
<h4 id="接受-jsx"><a href="#接受-jsx" class="headerlink" title="接受 jsx"></a>接受 jsx</h4><p>有人说对于一个新东西不要马上一巴掌拍死, 怎么着也给个 5 分钟, 第一次见到 jsx 是没给这 5 分钟直接贴了个反人类的标签的, 但是当我重新开始考虑 React 时, jsx 用自己 NB 的表现在我的心中重新树立了光辉的形象.<br>jsx 是那种看起来乱, 写起来比较爽的东西, 在 html 中任意插入 js 给了这种表达方式无穷无尽的可能性, 而且特别好理解, Vue 中则是通过 <code>:</code> ,<code>v-bind</code> 等完成的这些工作, 没有 React 的 <code>{ }</code> 搞定一切的这种快感.<br>当然也有不足, 比如占用 <code>class</code> 然后需要用 <code>className</code> 替代, 和 <code>style</code> 中的驼峰命名法等, 但是这些小问题掩盖不了任意插入 js 的这个爽到不行的 feature.</p>
<h4 id="开发体验和组件库"><a href="#开发体验和组件库" class="headerlink" title="开发体验和组件库"></a>开发体验和组件库</h4><p>写的时候, 慢慢的有了一种在写 WPF 的熟悉感, 通过一些结构化的描述语言描述界面, 然后绑定事件到方法, 由方法去设置 state, 然后关联到组件渲染上, 思维上非常自然, 不得不说 React 的设计精巧.<br>使用 vue-desktop-framework 开发的时候, 也有一种类似的感觉, 但是总没有 React 这么干净和利落, 所以是不是应该搞一个 react-desktop-framework ?<br>Antd 提供了非常丰富的组件, 也有很灵活的事件, 各种需求在查过文档后都能很快的实现出来, Element-UI 的文档看着就是有那么一点点的难受, 想做个什么东西却找不到合适的例子可以参考.</p>
<h4 id="使用-lt-Menu-gt-全家桶"><a href="#使用-lt-Menu-gt-全家桶" class="headerlink" title="使用 &lt;Menu&gt; 全家桶"></a>使用 <code>&lt;Menu&gt;</code> 全家桶</h4><p>首先实现的需求是显示文件夹列表,使用的组件是 <code>&lt;SubMenu&gt;</code> 和 <code>&lt;Menu.Item&gt;</code> 此处 Antd 有一个坑, 在列表太长时并不能滚动菜单, 导致的结果是移动端横屏状态下特别难受.<br>其次是折叠和展开. 折叠和展开的设计在 网易云音乐 UWP 中有一个很好的实践, 展开时显示所有歌单, 折叠时只显示几个主要功能按钮, 点击后展开列表并跳转到对应功能. 这个 Menu 的实现模仿了这一设计.<br>目前未解决的 bug 是点击 Settings 后当前文件夹的蓝色高亮会消失.</p>
<h4 id="列表渲染与条件渲染"><a href="#列表渲染与条件渲染" class="headerlink" title="列表渲染与条件渲染"></a>列表渲染与条件渲染</h4><p>条件渲染上, Vue 使用的是把 <code>v-if</code> 写在 attribute 的这种形式, 比较直观, 但是有时候会引起一点困惑, 尤其是混杂了复杂的 js 表达式时.<br>React 使用了一种有点费解但是很合理的方式, 体现了 jsx 中 html node 的表达式性质:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; <span class="keyword">this</span>.state.visible &amp;&amp; &lt;node /&gt;&#125;</div></pre></td></tr></table></figure></p>
<p>这样 <code>&lt;node /&gt;</code> 就会在 <code>this.state.visible</code> 为真时渲染, 也可以直接混入一个 if 语句然后实现条件渲染.</p>
<p>列表渲染 Vue 使用的也是 <code>v-for</code> 挂到一个数组上的 attribute, 和条件渲染一样直观但是也会有一些困惑.<br>React 需要用 <code>Array.map</code> 等方式进行处理, 或者使用 <code>Array.push</code> 创建节点数组再插入 dom 实现, 其实像我这种比较习惯用代码控制界面的, 这种方式会显得更亲切一点.<br>然而用得不好还是会炸, 参见下面的失败尝试.  </p>
<h4 id="lt-input-gt-的新使用方法"><a href="#lt-input-gt-的新使用方法" class="headerlink" title="&lt;input&gt; 的新使用方法"></a><code>&lt;input&gt;</code> 的新使用方法</h4><p>Vue 中的双向绑定是非常好理解 <code>&lt;input&gt;</code> 是如何工作的, 在数据改动的时候, <code>v-bind</code> 到的 store state 也会跟着变动.<br>React 的单向数据流是没法像这样工作的, 需要在 <code>onChange</code> 属性中使用 <code>this.setState</code> 改动 state, <code>&lt;input&gt;</code> 才会改变. <code>onChange</code> 是 React 添加的一个 event handler.<br>在实现可拖拽的进度条控制音乐播放进度中, 使用了这种方法实现播放进度的控制. 这个进度条操作上实现的非常漂亮, 较原前端更直观和简便, 一点遗憾就是不能显示缓冲进度.</p>
<h4 id="关于-lt-Modal-gt-和-Settings-的实现"><a href="#关于-lt-Modal-gt-和-Settings-的实现" class="headerlink" title="关于 &lt;Modal&gt; 和 Settings 的实现"></a>关于 <code>&lt;Modal&gt;</code> 和 Settings 的实现</h4><p><code>&lt;Modal&gt;</code> 的问题主要是两个, 其一是如何在取消时不改变原有配置, 其二是在每次打开 Settings 时创建不同的 <code>&lt;Modal&gt;</code>实例.<br>前者通过临时 state 过渡, 在 Cancel 时将临时 state 的值还原, Ok 则将临时 state 的值复制给配置项; 后者则在 <code>setState</code> 时传入一个随机数作为 key, 这种方法在 Antd 的文档中提到过.</p>
<h4 id="axios-的体验与后端-API-设计"><a href="#axios-的体验与后端-API-设计" class="headerlink" title="axios 的体验与后端 API 设计"></a>axios 的体验与后端 API 设计</h4><p>axios 的体验非常类似 vue-resource, 扫一遍文档即可快速上手, 同时也相对独立, 可以很好地整合进代码中.<br>后端 API 上是被坑了一下, 阅读后端文档时给出了两个参数, 然后往后端直接塞了一个 json, 结果一直是 illegal, 困惑的看了一下原前端实现, 发现是用 &amp; 连接参数…<br>个人认为直接传一个 key-value 形式的 json 应该是更科学的方式, 微信公众平台开发文档使用的就是这种形式.<br>还有一个比较神奇的是 Postman 给出的 http status code 始终是 200, 但是 body 中各种各样的 code 都有, 从200 到 404, 应该是后端的 bug.</p>
<h4 id="编写组件的失败尝试"><a href="#编写组件的失败尝试" class="headerlink" title="编写组件的失败尝试"></a>编写组件的失败尝试</h4><p>个人认为是对 React 的认识不够深入…<br>尝试编写了如下组件:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// Hightlight.js 似乎无法正确显示 jsx 的代码高亮, 请自行脑补.</span></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fMenu</span>(<span class="params">props</span>) </span>&#123;</div><div class="line">     <span class="keyword">return</span> &lt;Menu.Item key=&#123;props.text&#125;&gt;&#123;props.text&#125;&lt;/Menu.Item&gt;;</div><div class="line">&#125;</div><div class="line">function fMenuList(props) &#123;</div><div class="line">    let rows = [];</div><div class="line">    for(let i = 0; i &lt; props.fdlist.length; i++)</div><div class="line">        rows.push(&lt;fMenu text=&#123;props.fdlist[i]&#125; /&gt;);</div><div class="line">    return rows;</div><div class="line">&#125;</div><div class="line">/// ... 此处省略其他语句和节点</div><div class="line">&lt;fMenuList fdlist=&#123;this.state.fdlist&#125; /&gt;</div></pre></td></tr></table></figure>
<p>然后莫名奇妙的就炸了…<br>替代方法如下, 似乎是一种更合理的选择?<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123;<span class="keyword">this</span>.state.fdlist.map(<span class="function"><span class="params">x</span> =&gt;</span> &lt;Menu.Item key=&#123;x&#125;&gt;&#123;x&#125;&lt;<span class="regexp">/Menu.Item&gt;)&#125;</span></div></pre></td></tr></table></figure></p>
<h2 id="祭"><a href="#祭" class="headerlink" title="祭"></a>祭</h2><p><a href="https://github.com/BearKidsTeam/private-music-react" target="_blank" rel="external">https://github.com/BearKidsTeam/private-music-react</a> // 丑到不行的代码</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/React/">React</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端/">前端</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/技术/">技术</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2017/02/12/impl-pcm-fe/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
  
    <article id="post-softcsu-website" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2016/12/24/softcsu-website/">网页设计大赛记录</a>
    </h1>
        <a href="/2016/12/24/softcsu-website/" class="archive-article-date">
  	<time datetime="2016-12-24T03:36:46.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-24</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>比赛终于是结束了, 意料之外拿到了1=, 写一篇东西稍微记录下第一次参加学院组织的比赛的经历. </p>
<h2 id="选题"><a href="#选题" class="headerlink" title="选题"></a>选题</h2><p>2016-11-04出的题, <a href="http://software.csu.edu.cn/info/1072/3883.htm" target="_blank" rel="external">原新闻</a><br>看到这四个题目我的内心是有点崩溃的, 感觉一个比一个难做. 院网改善不好展开(当初这么认为), 学生机构除了科协的一个小小区域都不了解, 学风大比拼我都不知道这活动什么情况, 红军长征实在是不感冒. 后来就在院网改善和红军长征两个里想了很久, 最终选定了院网改善.</p>
<p>顺带找了下<a href="http://software.csu.edu.cn/info/1073/2352.htm" target="_blank" rel="external">去年的题</a>, 有一个是介绍常用软件, 怎么想这个题目的可拓展性都比今年这四个奇葩好吧. </p>
<h2 id="设计"><a href="#设计" class="headerlink" title="设计"></a>设计</h2><p>这次比赛设计上花的时间确实是前所未有的长, 目的很简单, 就是为了摸索一套最合适的方案, 留给以后用.</p>
<h3 id="艺术设计"><a href="#艺术设计" class="headerlink" title="艺术设计"></a>艺术设计</h3><p>选题的时候同时也看了看去年的一些作品, 一等奖的作品整体上看, 设计偏混乱, 没有统一设计语言, 随处可见套模板和代码复制等; 另一个软件学院官网的, 感觉没有跳出桎梏, 依然是非常传统的教育网站设计.</p>
<p>所以给设计定调就确立了一些基本原则, 要求的是设计语言必须统一, 同时趋近于现代化的网页, 也要跳出之前改善型网站的固定页面结构. 最终就成了现在的作品, 设计规范统一, 扁平化+阴影(Material Design 的思想), 以及非常独特的页面结构(osu!next 的设计风格).</p>
<p>这次主要还是为了练手, 所以就制定了一套流程, 从手绘设计稿开始(感谢 ThinkPad X1 Yoga 的电磁屏, 能让我跳过从纸稿到电子手稿的过程), 然后就是用 Photoshop 做全图, 最后切图.<br>放一张当初的手稿, 这个是列表页的雏形, 字丑就不要吐槽了, 都被说了多少年了<br><img src="/2016/12/24/softcsu-website/1.png" alt="1.png" title=""><br>以及 PS 出的首页图(和最终效果有一点区别, 但是整体接近)<br><img src="/2016/12/24/softcsu-website/2.png" alt="2.png" title=""></p>
<p>其实我不太会搞这些, 不管是设计软件使用还是具体的设计上, 也就是一个尝试与学习的过程, exp++.  </p>
<h3 id="架构设计"><a href="#架构设计" class="headerlink" title="架构设计"></a>架构设计</h3><p>这个还是我主要在做的事, 就是设计一套合理的技术栈, 方便开发.</p>
<p>之前我写东西都是想到什么写什么, 然后把各式各样的都堆在一起, 怎么爽怎么来, 认识到问题的时候就已经晚了, 所以这次着重关注了这方面. 另外一个驱动就是学习新技术和感受互联网氛围, 泡了那么久知乎, 还没有真正玩过这些比较NB的东西.</p>
<h4 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h4><p>前端框架方面在 <a href="https://facebook.github.io/react/" target="_blank" rel="external">React</a> , <a href="https://cn.vuejs.org/" target="_blank" rel="external">Vue</a> 和 <a href="https://angularjs.org/" target="_blank" rel="external">Angular</a> 之间挑了很久, 主要还是在语法习惯和生态环境的影响. React 有个我很喜欢的设计 <a href="http://ant.design" target="_blank" rel="external">Ant Design</a> , 但是 jsx 的那种奇葩写法让我感觉很蛋疼, Angular 显得有点重, 最后选择了 Vue 的生态.</p>
<p>前端框架的另一个好处是有不只是 CSS 的 UI 套件, 比如我用的 <a href="http://element.eleme.io/" target="_blank" rel="external">Element-UI</a> . 当初选这个的时候, 因为定调了扁平化,很自然的想到先去找 Material Design 的组件,  找到的几个要不是做的比较粗糙, 要不是给移动端做的不适合给桌面. 后来一想 Material Design 那种设计冲击感太强了, 用来做正经网站好像不太合适, 在 <a href="https://n3-components.github.io/N3-components/" target="_blank" rel="external">N3-Components</a> 和 Element-UI 中选了后者. 有一个 <a href="https://okoala.github.io/vue-antd/#!/docs/introduce" target="_blank" rel="external">Antd Vue</a> 本来很中意, 但是它的 repo 许久没有 commit , 甚至作者自己都不推荐用, 无奈放弃. </p>
<p>然后就开始研究 <a href="https://nodejs.org/en/" target="_blank" rel="external">Node.js</a> 了, 不得不说 <a href="https://www.npmjs.com/" target="_blank" rel="external">npm</a> 是一个超级爽的包管理器, 安装什么都特别方便, 还能管理好依赖啊一大堆, 相比 .NET 开发自己找 Assembly 的 dll 然后处理依赖(当时不会用 <a href="https://www.nuget.org/" target="_blank" rel="external">Nuget</a> , 现在这个问题也解决的差不多了). 效率上提升了不知道高到哪里去了. Node.js 的主要工作还是用来构建, 从 <a href="http://gruntjs.com/" target="_blank" rel="external">grunt</a> 换到 <a href="http://gulpjs.com/" target="_blank" rel="external">gulp</a> , 然后是 <a href="https://webpack.github.io/" target="_blank" rel="external">webpack</a>. webpack 是个更神奇的东西, import 一切的那种感觉是之前从未有过的.</p>
<p>Vue 的生态问题, 以前其实我没听说过 Single Page App 这种设计, 但是自己想过这种事, 就是用 js 解析 url 然后做转发. 了解了 <a href="https://router.vuejs.org/" target="_blank" rel="external">Vue-Router</a> 和 SPA 的设计理念后, 深刻的认识到了轮子满世界都是…配合 webpack 简直不能更爽, 还能模拟一下 404 页面这种功能.<br><a href="https://github.com/pagekit/vue-resource" target="_blank" rel="external">Vue-Resources</a> 应该是部分替代了 <a href="https://jquery.com/" target="_blank" rel="external">jQuery</a> 的 $.ajax 这些功能, Promise 比 callback 的体验还是好的多的.</p>
<p>最后前端的开发环境和技术架构大约是这样, 两张图来源于答辩 Presentation<br><img src="/2016/12/24/softcsu-website/3.png" alt="3.png" title=""><br><img src="/2016/12/24/softcsu-website/4.png" alt="4.png" title=""></p>
<h4 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h4><p>后端这部分搞的确实比前端多, 很自然的选定了 <a href="https://www.asp.net/" target="_blank" rel="external">ASP.NET</a> + <a href="https://www.mysql.com/" target="_blank" rel="external">MySQL</a> 的组合, 不用 <a href="https://secure.php.net/" target="_blank" rel="external">php</a> 的感觉是构建大型应用时总感觉有点力不从心(或者没找到合适的框架?). 曾有那么一个瞬间想用 <a href="https://www.mongodb.com/" target="_blank" rel="external">MongoDB</a> 或者 <a href="https://redis.io/" target="_blank" rel="external">Redis</a> 的, 又比对了一下场景, 感觉好像没什么需求, 就选了最熟悉的这套技术栈.</p>
<p>本来这个叫网页设计大赛, 后端应该不是重点. 搞后端的目的是为了玩出花样, 就写了个爬虫从院网爬数据回来然后发给前端. 院网那个设计真的是烂, 静态解析 html 和浏览器解析出来的 XPath 各种不一样, 懒得仔细研究了, 还好每一类页面的结构都是一致的, 确定一次后就不用再改了.</p>
<p>引入自然语言处理和 <a href="https://www.java.com/zh_CN/" target="_blank" rel="external">Java</a> 是做到一半才想的事, 目的还是为了玩点花样. 这部分用 <a href="https://www.python.org/" target="_blank" rel="external">Python</a> 可能更方便点, 但是在配环境上遇到了一些小问题,  <a href="https://pypi.python.org/pypi/pip" target="_blank" rel="external">pip</a> 还特别慢, 最后投靠了 Java . <a href="http://www.ikvm.net/" target="_blank" rel="external">IKVM.NET</a> 真的是个神奇的东西, 非常完美的把 <a href="http://hanlp.linrunsoft.com/" target="_blank" rel="external">HanLP</a> 塞进了 .NET 下.</p>
<p>后端的架构, 同样来自答辩 Presentation<br><img src="/2016/12/24/softcsu-website/5.png" alt="5.png" title=""></p>
<h4 id="踩过的坑"><a href="#踩过的坑" class="headerlink" title="踩过的坑"></a>踩过的坑</h4><p>太多了, 我觉得这个可以单独一篇文章出来讲. </p>
<p>讲个关于反爬虫的. 在比赛进行期间一切都很顺利, <a href="https://msdn.microsoft.com/zh-cn/library/system.net.webclient.aspx" target="_blank" rel="external">WebClient</a> 工作很正常. 但是比赛结束后准备答辩的那段时间突然就发现后端挂掉了, 赶紧去检查. 出现了奇怪的 <a href="https://msdn.microsoft.com/zh-cn/library/system.net.webexception.aspx" target="_blank" rel="external">WebException</a> , 感觉是院网开了反爬虫机制. 之前我为了缓存全院网的内容确实对整个网站扫过三四遍, 估计是被发现了?<br>本来以为这种 CMS 系统都有比较高级的方法, 去 <a href="https://stackoverflow.com/" target="_blank" rel="external">Stack Overflow</a> 上找了找, 推荐的一些方法都没效果. 用 <a href="http://www.telerik.com/fiddler" target="_blank" rel="external">Fiddler</a> 抓了个包, 比对了一下浏览器和 WebClient 的请求, 顺手把 Headers 给抄了过来:<br><figure class="highlight csharp"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">wc.Headers.Add(<span class="string">"Content-Type: text/html"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Referer: http://software.csu.edu.cn/index.htm"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Accept-Language: en-US,en;q=0.8,zh-Hans-CN;q=0.6,zh-Hans;q=0.4,ja;q=0.2"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Accept: text/html, application/xhtml+xml, image/jxr, */*"</span>);</div></pre></td></tr></table></figure></p>
<p>居然就可以了…</p>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><p>前端代码写的其实不算特别漂亮, 主要还是因为经验不足, 不过最后貌似吸引了不少注意力. 考虑这是篇记录性的文章, 不太展开讲了.</p>
<p>主要页面拆分了 HTML , CSS 和 JS , 复用化的组件用的是 .vue 单文件, 最后 webpack 全部塞到一起, 很简单粗暴的一种做法, 具体实现可以去文末的 GitHub 看.</p>
<p>后端就是 Model + Controller 以及一些其他的辅助类, 简单粗暴.</p>
<h2 id="答辩"><a href="#答辩" class="headerlink" title="答辩"></a>答辩</h2><p>要搞答辩的消息是从某个学长那听说的, 个人认为这是个好事, 有机会给评审者展示自己的一些思想, 同时还能刷刷脸. 最终成绩好还能搞点福利, 何乐而不为呢? 倒是真的要开始准备了, 心里就没什么底了…</p>
<p>一切要从一张图讲起:<br><img src="/2016/12/24/softcsu-website/6.png" alt="6.png" title=""><br>我这种平时过得很粗糙的人, 突然要我穿帅一点, 对我来说是个莫大的挑战…发现服装不计分, 我就先把这事放一边然后研究 Presentation 去了.</p>
<p>之前确实没搞过这种形式, 这次主要也是摸索和学习, 尽量提前发现一些问题.</p>
<h3 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h3><p>答辩主要还是 Presentation 和讲稿, 从某 Office 网站上下了个模板然后随便改了改就定了调. 其实我有点担心我下的这种排名靠前的还是热门的模板, 会不会到时候到现场和别人的撞在一起了. 事实上这种情况没出现, 但是我觉得应该引起重视, 能原创一些尽量原创, 真撞在一起了会显得很尴尬的.</p>
<p>Presentation 做的比较草率, 分了三部分然后从不同角度对作品进行阐述, 在这方面我就只能算中流水准, 比某些半屏幕字的好, 但是比不上设计很灵动的. 讲稿算是细心研究了一下, 揣摩了很多用词, 尽量扬长避短, 让评委老师不要太关注一些问题, 也发给了一些人做评价, 反馈基本上还可以.</p>
<p>后来想起来穿帅一点的事,于是答辩前一天去搞了一身正装, 不过我这种从乡下来的人并不知道怎么穿这种上档次的衣服, 出门前还仔细研究了一下, 结果还是出了点小问题. 虽然穿帅一点不能直接加分, 但是能给人一种良好的印象, 说明重视这场比赛, 可能造成一些隐性影响.</p>
<h3 id="现场"><a href="#现场" class="headerlink" title="现场"></a>现场</h3><p>那天下了不小的雨, 还有点冷, 因为下午还有节课所有披了一件比较厚的衣服御寒. 上完课顶着大雨去现场, 结果围着B座转了一圈居然没找到教室, 后来重新看了下路牌找到了地方.</p>
<p>进教室先是抽签, 其实最早我有些问题, 比如站位, 看稿子等问题, 心想应该不会抽到1号, 先看看别人怎么做总是没错的, 顺利地抽到了8. 然后找了个地方就坐下来了, 然后一直在发呆也没想去测试一下设备什么的. 看看别的队带了队友的都在调试交流, 就我在发呆感觉好奇怪.</p>
<p>一个一个看下来, 各种选题都有, 特别关注了选了院网改善的题的几组, 确实出现了我之前预测的一些问题, 信心又增长了一点.  </p>
<p>然后轮到我上场了, 顺利的讲完然后进入回答问题, 结果就问了些比如为什么要把 .NET 和 Java 混在一起等奇怪的问题, 完美的绕开了我之前准备的几个可能发问的点, 重心就跑到了说一个人一支队伍这种行为不好不好云云, 拖过了三分钟, 就算结束了.</p>
<p>下场后又是发呆等成绩, 帮我打杂的基友已经跑了, 就剩我在现场. 出分的时候我是感到有点震惊的, 虽然我对自己的作品还有点信心, 但是超过第二名将近4分让我感到很不可思议. 等第9组和第10组出成绩的时候是有点忐忑的, 毕竟选的都是院网改善, 也挺有竞争力的, 后来出分也就是平均水准. 最终我也成了全场唯一一个超过 80 分, 接近 81 分的组, 顺理成章的拿到了1=.</p>
<p>拍完照散场又被辅导员抓去说了一顿, 看来这个问题在这里显得特别严重, 而且似乎一人一组在最早评分的时候是会有负加成的.</p>
<h2 id="一些遗憾"><a href="#一些遗憾" class="headerlink" title="一些遗憾"></a>一些遗憾</h2><p>作品完成度确实不算很高, 有些单独的页面没有做, Responsive 没有做, 多浏览器没有仔细适配, 用的大量开发技术不兼容低版本浏览器等. 这些其实都有影响, 尤其是对于一个有点政治色彩的网站. 现在的院网为了做个漂亮的标题还用了Flash这种古董, 设计上也很古董, 估计就是为了兼容的妥协.</p>
<p>后端做的也不是特别好, 有些基于数据库的功能和全院分析没做, 工期什么确实紧, 我也比较懒还有些其他的事堆在一起就不了了之了, 还好没什么影响.</p>
<h2 id="杂谈"><a href="#杂谈" class="headerlink" title="杂谈"></a>杂谈</h2><p>最早看到比赛消息的时候, 我比较担心的事情是能不能找到队友, 和有没有时间去做这些, 后来拖得太久了, 这两件事都没解决, 但是感觉浪费了机会又不太好, 然后就决定自己一个人搞然后随便糊个作品上去, 证明我参加了就行. 真的没有考虑拿奖的事, 纯属意外?</p>
<p>这两件事迟早得解决的, 队友目前似乎有点起色, 时间的话可能需要我对现状做出一些改变, 才会有所成效. 毕竟寒假还有个程序设计竞赛, 那个应该才是重头戏.</p>
<h2 id="祭"><a href="#祭" class="headerlink" title="祭"></a>祭</h2><p>GitHub: <a href="https://github.com/jxpxxzj/softcsu-website" target="_blank" rel="external">softcsu-website</a><br>包含全部前端代码</p>
<p>感谢 <a href="https://github.com/BLumia" target="_blank" rel="external">BLumia</a> 帮我用一种优雅的方式解决了 footer 的固定问题.</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NET/">.NET</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Vue/">Vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/答辩/">答辩</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/24/softcsu-website/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
  
    <article id="post-celebration" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2016/12/24/celebration/">萍乡中学110周年校庆repo</a>
    </h1>
        <a href="/2016/12/24/celebration/" class="archive-article-date">
  	<time datetime="2016-12-23T17:22:14.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-24</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><em>从QQ空间迁移，本文撰于2016-11-11</em></p>
<h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>按时间整理了一下今天的直播及活动情况，写了个比较复杂的repo，配合今天的直播效果最佳。正文无图（直播没法拍）。</p>
<h2 id="记录"><a href="#记录" class="headerlink" title="记录"></a>记录</h2><h3 id="7-30——抵达学校"><a href="#7-30——抵达学校" class="headerlink" title="7:30——抵达学校"></a>7:30——抵达学校</h3><p>这时候还挺早的，从西站下了公交就简单的调试了一下直播设备，进校门后开始直播。</p>
<p>果然和我预想的一样，一路上插的都是印了110周年logo的彩旗，门口还有各种条幅。下车前看了一眼时间表，发现这个点应该在撞世纪钟，等我到的时候就听到了活动结束，哗啦哗啦都回去了，想想好像这个仪式应该参加过，就走过去了。</p>
<p>上完山看到了更多的彩旗横幅，还有若干迎宾学生，宣传栏下面摆满了各种学校的贺信，有清北复交等一批大学的和临一等高中的，最让我感到神奇的的是也有初中和小学的，不知道是怎么扯上关系的。来的比较早也没什么人，然后就去瞎逛了一圈。</p>
<img src="/2016/12/24/celebration/1.jpg" alt="1.jpg" title="">
<p>到了雏鹰楼门口发现有个签到处，碰见了大眼睛，不过他好像在忙什么，打了个招呼就走开了。找了找签到处贴的告示，最晚的是90届以后的，想了想我好想比90届晚了20多年，跑去签到不太合适；旁边那个大签名版当时没看到有笔，也就没有抢先留个记号。</p>
<p>进到教学楼里面，人还是比较多的，可能当时也没有开始，很多学生都呆在教室里。去几个可能的教室看了看，并没有看到哪个比较脸熟的，估计是也没有来。</p>
<h3 id="8-30——仪式前"><a href="#8-30——仪式前" class="headerlink" title="8:30——仪式前"></a>8:30——仪式前</h3><p>前面的从教学楼出来的时候就已经差不多这个时候了，学生也开始搬着小板凳操场上就坐。这时候直播间的人慢慢开始变多了，发弹幕的也多了，也有一些超出我的circle的来看，最常见的就是找xx老师的，我虽然很想帮忙找可是我真的不认识啊…校友陆陆续续来了后发现要不是上了年纪的要不是功成名就的，我这个刚毕业的和他们混在一起真是感觉特别惭愧。</p>
<p>围着整个观众席兜了几大圈之后还是找到了潘和井根男神，换到了前置摄像头合影（没截图没拍照，不过我想应该有观众截图了吧）。此时也碰见了颂华女神，贤哥等，随意寒暄了几句。</p>
<p>看了看时间发现快要开始了，然后就一边兜圈一边找哪里可以坐，估计是学校高估了来的人，中间的塑料椅上座率实在是不高，抱了个老师的大腿就溜到教师席坐着，调好高度什么的，等仪式开始。</p>
<h3 id="9-30——庆典仪式"><a href="#9-30——庆典仪式" class="headerlink" title="9:30——庆典仪式"></a>9:30——庆典仪式</h3><p>仪式还是那么个仪式，满满的套路感，主持完然后就是各种领导、校友、代表发言，发奖学金之类的。仪式流程上感觉有问题，鸣炮的同时在唱国歌，现场应该是集体懵逼了一下，响完了才开始接着唱的。</p>
<p>这时候就遇到了一个特别烦的问题，就是现场用手机上网的太多，基站承受不住然后挂掉了，直接导致直播中断十几分钟。几乎断网的时间就顺便看了看QQ消息，已经被各种群消息私聊消息挤爆了，拖太久了真的会出事的。更严重的问题是流量告急，10086发了好多短信告诉我流量费已达xx元，然后就开始清缴欠费和补流量，之后就是无尽的加流量包加流量包（失策，真的没想到用了那么多流量）。</p>
<h3 id="10-30——文艺汇演"><a href="#10-30——文艺汇演" class="headerlink" title="10:30——文艺汇演"></a>10:30——文艺汇演</h3><p>文艺汇演应该是今天上午的重头戏，经过庆典仪式的仔细观察找到了一个前排比较合适的座位，然后赶紧溜过去坐上。整体来说节目的质量还是很可以的，尤其是最后的校歌，从抗日军政大学校歌（这篇repo是听着这个写完的）到现在的校歌，都是第一次听现场版，效果特别震撼。乐器合奏环节也很精彩，单类演奏和最后的合奏都很漂亮。音乐类节目现场效果都是一流水准，直播音频经过压缩估计没有现场效果这么好了。诗朗诵以及舞蹈什么的我就不好评价了，不太了解，看了直播的心里应该会有个底是什么水平。</p>
<p>文艺汇演期间网络又崩溃了一次，比较巧妙的断在校友捐赠仪式，基本没有影响到节目表演。</p>
<h3 id="12-20——午餐"><a href="#12-20——午餐" class="headerlink" title="12:20——午餐"></a>12:20——午餐</h3><p>实际上文艺汇演是拖了大概半个小时才开始的，所以最后也就是12点多才结束，快结束的时候弹幕好多人刷要我去抢饭，看了看之前写的饭票发现是二楼，也就是学校宴请校友和教职工的地方，想本来就没发出去多少，座位应该不会有什么问题的。听完了最后的合唱，慢慢悠悠的走到了食堂二楼，发现里面几乎满员了。一开始跑到了接近话筒的地方，一打听是领导席，又跑到旁边的桌子，以为能坐个好的，后来又被尴尬的带到了另一桌。其实桌都是小事，主要是和我坐一起的要不是老师，要不是老一辈校友，16届的跑去有点不伦不类，显得比较尴尬。</p>
<p>坐定之后就是上菜了，当时觉得之后开餐会有点不太方便就想关掉直播，被广大观众阻止了一下后决定举着自拍杆直播全过程（某主播直播在学校食堂吃饭月入百万？）。80多观众还特别开心的在看，是太想回来了，还是觉得外地的菜不对自己胃口想看看家乡的口味？</p>
<p>实话讲学校设的宴质量还是很高的（菜品种类和口味），唯一的问题就是备的太少，前面几碗基本上一分钟左右就会被清空到只剩点汤汤水水了，同时满满一桶饭在第五碗菜还没上的时候就已经基本被打完了。比较神奇的是宴席的菜基本上都是肉类，蔬菜是最后都开始离席了才上的。弹幕给出了一种解释是蔬菜都去学生食堂了，散伙后拐到一楼去看了一眼，确实满满的食堂特色，虽然是校庆，也没见有什么特别豪华的加餐（也有可能是我来的太晚了，将近13:30了）。</p>
<p>坐我旁边的是爷爷奶奶辈的校友，当时我发现她看我的眼神特别奇怪，估计是没见过这种举着自拍杆吃饭还和观众聊天的行为。坐在我对面的据弹幕反映是学校的老师，还是教化学的，不过我实在是不认识。</p>
<h3 id="13-40——闲逛"><a href="#13-40——闲逛" class="headerlink" title="13:40——闲逛"></a>13:40——闲逛</h3><p>下午没有什么大型集体活动了，从食堂出来先去小卖部买了根热狗，我都忘了是不是能用现金支付了，掏出两块后果然是很有特色的找了一包纸。差不多14:00的时候，按学校给的日程安排去了和平楼二楼的13-15届活动室（没有16届，看来学校并没有重视我们这群溜回来的）。和平楼二楼被全面翻修了一次，地上不再是水泥，窗户也换成了铝合金的推拉窗。比较意外的是活动室基本上是空的，包括我后来去雏鹰楼看的一些校友活动室，不知道这些校友们是走了还是不知道这里有教室可以联谊的。</p>
<p>没组织活动那就又只能去学校里转悠了。参观了新建的小足球场，翻新的三星级厕所等，条件较之前确实很有改善，果然母校就是一毕业就开始各种翻修的地方。新建的体育馆气势很大，完成度仍然不高，明年校庆或者什么时候可能就会开放了。都转了一圈后就没什么需要展示的了，直播到此结束。</p>
<h2 id="祭"><a href="#祭" class="headerlink" title="祭"></a>祭</h2><p>最后附几张图：<br>餐券，也是我手里唯一的纪念品（没有领其他校友的那种资料袋）<br><img src="/2016/12/24/celebration/2.jpg" alt="2.jpg" title=""></p>
<p>听说从来没听懂过的校歌的谱子：<br><img src="/2016/12/24/celebration/3.jpg" alt="3.jpg" title=""> </p>
<p>音频文件（升旗前放的那个）：<br>链接: <a href="http://pan.baidu.com/s/1bpmm0xT" target="_blank" rel="external">百度网盘</a> 密码: g2mm</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/24/celebration/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
  
    <article id="post-memorial" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2016/12/24/memorial/">记·念</a>
    </h1>
        <a href="/2016/12/24/memorial/" class="archive-article-date">
  	<time datetime="2016-12-23T17:11:05.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-24</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><em>从QQ空间迁移，本文撰于2015-05-08</em></p>
<h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>搭配食用风味更佳： </p>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=35625821&auto=0&height=66"></iframe>

<h2 id="Chapter-I"><a href="#Chapter-I" class="headerlink" title="Chapter I"></a>Chapter I</h2><p>这是我大约一个月前写的杂谈，或者说是记念听后感。</p>
<p>其实所谓青春，现在的那些电影都算不上青春。看着那些怀念青春的电影层出不穷，老在堕胎打架的青春到底是谁的青春。这才是属于青春正当年的歌，不是不能回头的中年人的致礼追忆。不是很喜欢所谓校园民谣，来来回回不过惦记着当年喜欢的姑娘嫁了谁，过得如何，一根筋，人生指标好简单。而且觉得有种绝望在里面，青春已经走到了尽头。</p>
<p>“青春这个词，不适合自我标榜，说出来，就远离了，就好像纯洁善良等词一样，心中晶莹，眼中闪光。歌声里，大家都是清清白白少年，没有无奈，没有谁辜负了谁，没有谁欠谁，未来是一起去向往的明天，各有前程美好可期待。每个一起度过的时间都值得感谢。一颗心是不属于任何人的自己。等待中，每一天都美好地度过。”</p>
<p>大凡有作者的东西，不免提到知人论世。雷雨心今年也是个高二的学生，虽然创作在初中，却并不影响这首歌的感染力与表现力。有人说歌词朴素，可是华丽的歌词并不一定动人。我手写我心是一种天赋，不是每个人都做得到，真的听着觉得心里一下就柔了。略带青涩的词曲风，以及青春满满的歌喉，这才是青春。</p>
<p>青春应当是由属于这个时代的人，由我们自己来书写的，雷雨心正充当了一个这样的角色。高三，或者说我们，三年时光匆匆流过，来得及来不及书写青春和记念，在这首曲子中体现的淋漓尽致，正呼应了“记念”：一边书写，一边怀念。感而不伤，充满憧憬，无端心动。</p>
<p>听歌，如果身处在歌曲那个环境中，才会激起心中的共鸣。我不懂音乐也没学过音乐，当我听到这首歌，脑海里浮现出来的画面都是自己的青春时光，对我来说一首歌能够触动到我的内心深处，我觉得它就是好歌曲。简单、感动就是这样。一字一句听下来，脑海中仿佛在放幻灯片，三年来一幕幕场景再现。换作毕业的高三，又有几人不会泪如雨下。属于他们的青春已经逝去，没来得及好好体验，已经从指尖流走，光年只剩下纪念。</p>
<p>恰到好处的叙事写实，重现着点点滴滴让人感动的生活。这样的环境，沉浸于那个小小世界中，每个听者都能找到属于自己的记念，找到属于自己的流年。</p>
<p>唱歌总是不能为了唱歌而唱歌，空有旋律没有灵魂，一首歌就丧失了它的活力。只有真正感受到了原曲的内涵，才能更好的传播扩散它。虽然是合唱，假若没有赛事压力，只有让每个人都去聆听，品味，思索，迷失与引航，才能让每个人都唱出属于自己的记念，才是这个班完整的，真正的纪念。</p>
<p>恰到好处的时间，遇上了一首恰到好处的美乐。追逐未来的梦想，珍惜现在的光年，到达那个约定好的地点。</p>
<h2 id="Chapter-II"><a href="#Chapter-II" class="headerlink" title="Chapter II"></a>Chapter II</h2><p>正文部分。这里我想谈一谈生竞，或者说是竞赛。</p>
<p>搞竞赛其实有着与高考完全不同的体验。上次听高三生竞学长讲课，感慨颇多。他当时画了一张图，形状大约是对数和指数函数的图像，横纵坐标是努力程度与收获。高考就是对数，竞赛就是指数。高考的努力在一定程度内会高于竞赛，但是总归有一个极限。但是竞赛不同，竞赛就像探索更大的世界，努力的越多，这个未知的世界回馈给你的就越多。除了数学竞赛，其他的竞赛都大大扩充了知识面和知识深度，比如化学和生物甚至有的到了考研的水平，而OI很多稀奇古怪的算法在大学教育中都难以见到。</p>
<p>这几天偶尔和别人说起竞赛，也会调侃一下自己的竞赛史，说生竞几乎把自己送上了知识巅峰。确实生竞作为可能是最贴近生活的一门竞赛，知识面非常的广，在20天左右的时间内记忆如此大量的确实榨干了我自己的每一滴油水。毫不夸张的说，从小到大，从来没有像为了记忆普通动物学里十个门几十个纲的上百种动物及其特征那么努力过，几百页的书和幻灯片一遍又一遍的阅读，抄写，就为了记下那些乱七八糟的生活史发育方式结构形态。要是我背课文有这十分之一的努力程度，我也不至于沦落到64篇里背得出来的能用一只手数尽的局面了。</p>
<p>现在回想一下，我也不知道是什么促使着我这样去为了一个看起来并没有什么用的东西耗费大把大把的精力时间去学习。不过体验了这个学习过程，掌握了一些偏僻的知识，也算是有一些收获吧。</p>
<p>除了动物分类之外，还有什么细胞生物学，生物信息学，生物化学，微生物学，植物形态生理，动物生理行为，生态遗传进化之类的东西，也算是开了眼界，有机会分享一下一些比较冷门的知识，这样又多了一些谈资，何乐而不为嘛。</p>
<p>要走的那个下午进到器材室，看到李mj拿出了一张之前的动物学卷子。她给我展示了一下她当年的战绩，看上去和我们现在去做差不了多少。她一直是专长于植物学，在她脑中一种很重要的思想就是竞赛全靠兴趣。当时她正在对照卷子上的错题翻看书本。我找出那本本来用来拍照的生理学，递到她的面前。本来是说想带回家再看看的，她说不用了，告诉我她已经不在乎这次竞赛能得多少分了。伴随着轻柔洒脱的语气，听到的那个时候，内心确实有一点小触动。好奇问了一下原因，她说前夜很晚才睡下，思考她两年来的经历，驱动她坚持下去的是什么样的信念，答案就是兴趣。因为她对植物学感兴趣，她才愿意认真的去学习去记忆那些东西。而动物学并不怎么合乎她的口味，但是为了竞赛还是阅读了动物学的相关教材。竞赛确实需要兴趣去驱动，就像前面所说，投入产出比只有在足够的努力之后才会有所提升，然而没有兴趣只有功利的拿奖心情，很难达到那个大幅提升的拐点。</p>
<p>从一开始望着试卷发呆乱蒙一气到仔细思考认真答题，大量的新知识被塞入我的脑中，我也不知道它们能在其中停留多久。就算是一年前做烂的各种DP现在也得花好大功夫回忆还不一定写的对，这个生竞速成班，怕是活不久了。但是最少，当我有一天望望自己的书架，找出那本生理学或是遗传学，翻上几页，总不会忘记我曾经为之而努力过，奋斗过，拼搏过。</p>
<p>想起来前段时间参加的编程之美。虽然一直在写各种各样的程序，但是纯算法题接触的很少了。报了个名，然后稀里糊涂的到了预赛。说实话除了第一个模拟，其他两个看着都有点茫然，后来告诉我第二题是个区间DP，才去思考算法。墨迹半个小时写了个状态转移方程，虽然过了样例看起来没什么问题，但是还是倒在了大数据上，有点无奈，不过也算拿到了资格。可惜初赛举办的时候都在学校，没能继续往下走了，算是小小的遗憾。</p>
<p>化竞说来话长，以后再谈。</p>
<p>总结一下，竞赛是一件很有意思的事，不体验一下，感觉是有点可惜的。它带来的收获很大，对思维和能力的提升让它很多时候相比高考并没有那么的亏。以前蔡cq等等一批竞赛教练给所有的竞赛党（听说是常用的自黑手法）们开了次会，讲到了竞赛的意义，这是一件益事。</p>
<h2 id="Chapter-III"><a href="#Chapter-III" class="headerlink" title="Chapter III"></a>Chapter III</h2><p>这里留给生竞20天停课备战的体验与感受，这会是高中生活最难忘的时光之一。</p>
<p>通过预赛算是一件意料之外的事，虽然知道进了复赛迟早要停课，但是当我某一天来到学校接到通知说当天就开始的时候，我还是有一点震惊的。</p>
<p>生竞对我来说不是新话题，毕竟当年还参加过初中生物竞赛，但是看到生竞党的桌上一本一本胜似砖头的书的时候，其实我是拒绝的，因为我觉得不加特技根本记不下来那么多书中的内容。</p>
<p>抬头一看黑板，上面写着学科和分工。看了看我，写着细胞生物学和生物化学(听说分配原因是没人看的懂生化里那些乱七八糟的物质和反应拉了我这个化竞党来充数)，心里有点发虚。一早就听说生化非常恶心，翻了几页书，果然名不虚传。没办法，硬着头皮也要啃下来。停课是从早到晚全天候自习，就算是这样富足的时间，也消耗了我两天的时间读完全书。</p>
<p>读完了书自然得做题吧。生竞相比其他竞赛的特点就是只有选择题，经梁yf和上一届一等奖的学长介绍进了一个生竞在线题库的地方(这玩意看起来虽然好厉害，但是内部架构烂得不行，经常有20道题只对一两个一看好多答案是空白的情况)。默默点开知识点训练，戳了一下生化。我的内心几乎是崩溃的，因为虽然看了一遍书，但是一看题发现自己要不是看都看不懂要不是只剩下个模糊印象根本没法答题。连蒙带猜做了一些题，没办法，再回去过一遍书。这一次看因为有题目协助找重点，算是有点成效。第二次看完之后，再去做题感觉更为顺畅了，虽然还是有卡壳的知识点，不过大体上还是可以把握一下的。</p>
<p>我看生化的时候张xy在啃细胞生物学。和我一样，以前几乎不背东西的人突然要接受并且记忆如此大量的知识，他的内心也几乎是崩溃的，经常叫苦连天根本看不下去记不下来。听说在最后阶段他的阅读方式是只看标题，正文全跳过，做到了再回来翻书，看起来貌似是挺有效的一种策略。</p>
<p>好记性不如烂笔头，在动物学这个大骨头面前，策略从脑记变成了文科生眼里貌似没什么用的抄书大法。A4大小将近600页的普通动物学看了两遍，300余张幻灯片一页一页的抄，抄上一遍能写满正反两面3张卷子大小的纸。虽然比较累，但是效果相对来说还是很不错的，除了某些记混的知识点，大体上的特征还是能记忆下来的。</p>
<p>脱离了正常的教学秩序，相对自由的学习方式也带来了相对自由的生活方式。</p>
<p>长时间自习未免有些无聊，恰逢做倒平板实验，隔壁实验室和器材室的门顺理成章的就打开了。我便去里面找了一些仪器和半瓶子硫酸铜，在实验室里养晶体玩。竞赛搞的是理论，实践起来还是有点问题的，要是这是什么实验考试，估计能给扣成负分。毕竟学校的东西，玩起来也比较阔绰，酒精灯烧干了四五个，硫酸铜也所剩无几了。之前真没有做过晶体，很多东西都是在摸索中前行。不过后来还是做出了相对还能看的晶簇，还有传说中的硫酸铜大饼。最让我不爽的是好不容易结出一团晶体，结果转几圈给砸碎得只剩下一小团了。后来丢着让它自然蒸发结晶，结果貌似是那个烧杯飞进了几只奇怪的虫子，挂着的晶体也风化变的润润的，不了了之。</p>
<p>说起试剂，倒平板用来做培养基的琼脂也被拿来用于动物标本的固定。这方面我接触的不多，不过看到一大群人围攻一只一不小心溜进来的天牛还是很有意思的。</p>
<p>每张桌子下面都有一台显微镜，再加上一盒一盒的动物植物微生物标本，算是过足了一把玩显微镜的瘾，不过其实没什么好看的，而且照明用的灯很容易坏，体验了新鲜感之后就没怎么再玩了。</p>
<p>逐日楼有个特点，很多直接栓在门上的锁是可以用实验室里的镊子撬开的。本来我们是要去标本室里放书的，但是那个标本室里有很多奇怪的标本，导致进去很是蛋疼。后来研究撬锁技术撬开了实验室后面的器材室，这才解决了放书的问题。同样通过撬锁解决的还有厕所，因为男厕所没能撬开，只能将就一下去女厕所。虽然我们都习以为常了，外人看起来肯定是一脸奇怪的。还好人流量不大，倒也没什么问题。听说他们还撬开了天台和天文望远镜的锁，不知后事如何了。</p>
<p>相比动物学而言，我认为植物学更加简单粗暴，很多东西书上写的明明白白，可是你看到题还是不会，什么都想不起来。毕竟是植物，很多时候可以摘回来直接研究，所以有时候也会跟着姚yc一起去校园里溜达，到树林里指认植物，或是摘几朵小花，回来研究结构。校园里植物繁密，但是在这种时间段里想要找到几朵像样花还是费了点功夫的。不过水平毕竟有限，认得出花萼雄雌蕊这些结构但是看不出是哪个科的植物，虽然我相信这些特征我一定看过，可是我什么都不记得，实在是力不从心。</p>
<p>很多人觉得我们生活相当糜烂，好像是有一点。自从停课开始，大量的电子设备进入了这间实验室，手机平板笔记本应有尽有，加上隔壁团委的Wi-Fi，条件很是优秀。不过毕竟是自习，看课件查知识刷题库还是主要任务。然而不免颓废一下，遍地开花的设备意味着各式各样的娱乐项目。作为粉饼教的忠实教徒，成功的给一窝人引荐了osu!这个游戏算是小小成就。偶尔换换口味去玩Clickr，深感智商被活活的碾压，张xy颇为不服。倒是姚yc不小心迷上了一款叫做战舰少女自称是养成类的游戏，玩到激动处总会拍案而起大呼爽快，喜感无比，反正我试玩了一下感觉只能用来打发时间，娱乐性并不高。</p>
<p>逐日楼中间有个池子，里面有几条金鱼，倒也给这里增添了几分灵气。要是早上剩了小半个馒头，总会捏成小块喂给那些鱼吃。那些鱼貌似是被驯化过的，听到有声音就会朝着声源游去，于是乎只要拍拍掌，就会我大家的鱼聚集在池边等待喂食。这时丢下几块掰碎的馒头，总会引来一阵哄抢。听说上次他们拿硫酸铜泡了一下那些馒头再拿去喂了鱼，不知那些不小心吃了一口的鱼活的还开不开心。</p>
<p>讲完了生活，来讲讲人。这里谈谈廖j这位老师。做了3年梁yf的学生，第一次和其他的生物老师接触，还是怀有一点期待的，毕竟之前就听梁yf提到过他，还多了一丝好奇。相比其他的竞赛主管教师，他算是年轻派的代表，平时大大咧咧很喜欢和我们打成一片，对我们也很好。偶尔来探探班，看见我们在颓废，也不会怎么太在意，他说自己也是这样走过来的，很能体会我们的感受，甚至看到我们讨论一些老游戏或者什么生活问题也会加入我们一起探讨。年轻老师有年轻老师的特点，活力十足，交流亲切，没有距离感，相比之下年长一些的则更为稳妥一些，没那么开放了。就这几天的接触来看，他绝对是人生中不可多得的一位好老师。这里要感谢他为生竞组的付出。</p>
<p>作为一个大大咧咧的好老师，他经常私人出资给我们买吃的买喝的，甚至带我们出去请客吃饭，放我们在外面浪，顺带给上自习的拉拉仇恨。不知道上次去送KFC给他正在上晚自习的那个班(貌似就是楼上的11班，不知2班的小伙伴们还记不记得那阵骚动)和旁边的班带来了多大影响。和生竞组的人去吃饭是一种很奇妙的体验，吃到一半经常会夹起一块肉问这是哪个部位的什么组织，挑出蔬菜或是一些不知名动物看特征判断分类。别样的人，别样的饭桌，别样的生活。</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/24/memorial/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
  
    <article id="post-gaokao-love" class="article article-type-post article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 itemprop="name">
      <a class="article-title" href="/2016/12/24/gaokao-love/">未来的志愿书 - &lt;高考恋爱一百天&gt;</a>
    </h1>
        <a href="/2016/12/24/gaokao-love/" class="archive-article-date">
  	<time datetime="2016-12-23T16:05:03.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-24</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><em>从QQ空间迁移，本文撰于2015-06-05</em></p>
<h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>游戏评测一篇。</p>
<p>按照惯例 先上BGM<br>Days 幻梦年华乐团（作词：圣月樱泪 演唱：西国の海妖） – 未来的志愿书</p>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=30798358&auto=0&height=66"></iframe>

<p>此曲是本游戏ED。</p>
<p><strong>！内含大量剧透 不愿意看的请跳过剧情评测！</strong></p>
<h2 id="整体"><a href="#整体" class="headerlink" title="整体"></a>整体</h2><p>galgame玩的不多，自己对这类游戏也不算太感兴趣。很早之前就有听说过这个游戏，不过后来也慢慢的忘了。这几天又被安利Steam版，几度思考后入手。</p>
<p>其实对于独立制作的游戏来说，除了展示制作者的idea之外，完成度应该可以说是一个最重要的问题了。能把游戏各个方面都做到至少合格，让玩家觉得值得一玩，这对于独立制作者来说并不是一个简单的事情，而游戏在这一点上做的非常好。</p>
<p>国产galgame相比岛国的产业算是十分落后，也在摸索中前进。但是这个游戏做了一次创意十足的尝试。虽然是国内为数不多的良心作，但是和岛国精良的画风和优秀的CV相比还是有不小的差距。但是不管怎么说，这是一部诚意满满的作品。<br>
        
          <a class="article-more-a" href="/2016/12/24/gaokao-love/#more">more >></a>
        
      

      
    </p></div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/24/gaokao-love/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>
          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2017 jxpxxzj
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: true,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: false
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
    <div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    

    

    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
